<template>
  <div class="column q-pa-sm">
    <div class="column upper col-6 q-pa-md">
      <div class="creator-info row justify-between no-wrap items-center">
        <div class="row no-wrap">
          <avatar size="34px" src="/images/default-avatar.png" />
          <div class="info column q-ml-sm">
            <div class="name">Xinki</div>
            <div class="summary one-line-text">
              240 Followers · posted 1 year ago
            </div>
          </div>
        </div>
        <q-btn size="sm" label="Follow" no-caps color="accent"></q-btn>
      </div>
      <div class="description q-ma-sm">
        If you find my content helpful, you can always buy me a coffee... Your
        support, donation and patronage will greatly help me bring new content
        more often!
      </div>
      <q-btn
        class="full-width"
        flat
        label="show more"
        color="accent"
        outline
        :ripple="false"
        size="xs"
      />
    </div>
    <div class="lower col-4 column q-pa-md">
      <div class="row justify-between items-center">
        <div class="row">
          <q-spinner-audio color="accent" size="2em" />
          <avatar
            class="q-mx-sm"
            size="34px"
            src="/images/default-avatar.png"
          />
          <div class="column">
            <div class="name">Jenny Xiang</div>
            <div class="summary">22 Followers</div>
          </div>
        </div>
        <q-btn size="sm" label="Follow" no-caps color="accent"></q-btn>
      </div>
      <div class="row q-ml-lg items-center">
        <h-icon-num icon="mdi-star" label="0" />
        <q-chip class="chip" square size="10px" style="color: #4595ef"
          >TRANSLATION</q-chip
        >
        <q-chip class="chip" square size="10px" style="color: #b7b7b7"
          >Mandarin</q-chip
        >
        <div style="color: #808080" class="one-line-text">
          · posted 1 year ago
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Video from 'src/models/Video';
import { defineComponent, ref } from 'vue';
import HIconNum from 'components/utils/HIconNum.vue';
import Avatar from 'components/Avatar.vue';
export default defineComponent({
  name: 'description-panel',
  components: {
    HIconNum,
    Avatar,
  },
  setup() {
    return {};
  },
});
</script>
<style lang="scss" scoped>
.upper {
  width: 100%;
  z-index: 5;
  box-shadow: 0px 5px 6px rgba(0, 0, 0, 0.8);
  background-color: #1c1c1c;
  font-size: 12px;
  .creator-info {
    .info {
      .summary {
        color: $sub;
      }
    }
  }
}
.lower {
  width: 100%;
  z-index: 2;
  background-color: #242424;
  font-size: 12px;
  .summary {
    color: $sub;
  }
}
</style>
